/*scss 可共用的样式*/
@mixin bgc($url) {
  background-image: url($url);
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
}

/*居中*/
@mixin centered{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/*图片填满*/
@mixin imgFull{
  width: 100%;
  height: 100%;
}
/*flex 内容两端对齐 column*/
@mixin flexBetween($direction){
  display: flex;
  flex-direction: $direction;
  justify-content: space-between;
}
// 宽高
@mixin wh($age){
  width: $age;
  height:$age;
}

// 一像素下边框
@mixin bottom-border-1px($color){
  position: relative;
  border: none;
  &:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: $color;
    transform: scaleY(0.5);
  }
}
// 一像素上边框
@mixin top-border-1px($color){
  position: relative;
  &:after{
    content: '';
    position: absolute;
    left: 0;
    z-index: 200;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: $color;
  }
}
//根据像素比缩放1px像素边框
@media only screen and (-webkit-device-pixel-ratio:2 ){
  .border-1px{
    &::before{
      transform: scaleY(.5);
    }
  }
}
@media only screen and (-webkit-device-pixel-ratio:3 ){
  .border-1px{
    &::before{
      transform: scaleY(.333333);
    }
  }
}
//根据像素比来使用 2x图 3x图
@mixin bg-image($url){
  background-image:url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image:url($url + "@3x.png");
  }
}
//清除浮动
@mixin clearFix(){
  *zoom:1;
  &::after{
    content: '';
    display: block;
    clear: both;
  }
}